<template>
	<view>
		<!-- 时间和账单分类选择 -->
		<view style="padding: 20rpx;">
			<uni-row>
				<uni-col :span="12">
					<b>
						<picker mode="date" :value="date" @change="bindDateChange" fields="month">
							<view class="uni-input">{{date}}
								<uni-icons type="bottom" size="15"></uni-icons>
							</view>
						</picker>
					</b>
					<view><small>收入¥<text v-text="monthIncome"></text></small></view>
				</uni-col>
				<uni-col :span="12">
					<b>
						<picker @change="bindPickerChange" :value="index" :range="array">

							<view class="uni-input">{{array[index]}}
								<uni-icons type="bottom" size="15"></uni-icons>
							</view>
						</picker>
					</b>
				</uni-col>
			</uni-row>
		</view>
		<view style="padding: 20rpx;" v-for="bill in billList">
			<uni-row>
				<uni-col :span="3">
					<image :src="bill.imgUrl" style="width: 80rpx; height: 80rpx;"></image>
					
				</uni-col>
				<uni-col :span="14">
					<view><text>{{array[bill.type]}}</text></view>
					<view><small v-text="bill.time">11-30 12:42</small></view>
				</uni-col>
				<uni-col :span="7" style="text-align: right;">
					<b>
						<text v-if="bill.type<=2">+</text>
						<text v-else>-</text>
						<text v-text="bill.amount"></text>
					</b>
				</uni-col>
			</uni-row>
		</view>
	</view>
</template>


<script>
	export default {
		data() {
			let currentDate = this.getDate();
			return {
				date: currentDate,
				array: ['请选择', '入账中', '入账成功', '提现中', '提现成功'],
				index: 0,
				monthIncome: 0,
				selectMonth: "1900-1-1",
				iconArray: ["zd_icon_rzz.png", "zd_icon_dlyj.png", "zd_icon_txz.png", "zd_icon_txcg.png"],
				billList: []
			}
		},
		onLoad() {
			let dateMonth = new Date();
			let year = dateMonth.getFullYear();
			let month = dateMonth.getMonth() + 1;
			let initDate = year + "-" + month;
			this.selectMonth = initDate;
			this.showMonthIncome(initDate);
		},
		methods: {
			// 选择账单分类后的方法
			bindPickerChange: function(e) {
				console.log('picker发送选择改变，携带值为', e.detail.value)
				this.index = e.detail.value
				this.showBillList();
			},
			// 选择账单月份后的方法
			bindDateChange: function(e) {
				this.selectMonth = e.detail.value;
				this.date = this.getDate(this.selectMonth);
				// 调用显示选中月份的收入
				this.showMonthIncome();
				//console.log(paramDate);
				//console.log(this.date);
				this.showBillList();
			},
			// 日期的格式转换方法
			getDate(datestr) {
				let dateMonth = null;
				if (datestr == null) {
					dateMonth = new Date();
				} else {
					dateMonth = new Date(datestr);
				}
				let year = dateMonth.getFullYear();
				let month = dateMonth.getMonth() + 1;

				month = month > 9 ? month : '0' + month;
				return `${year}年${month}月`;
			},
			//加载当月收入信息(入账成功的款项)
			showMonthIncome() {
				uni.request({
					url: 'http://120.46.197.40:8080/api/userAccount/getBillsRecord',
					method: 'POST',
					data: {
						"monthTime": this.selectMonth,
						"pageNo": 1,
						"pageRow": 50,
						"type": 2,
						"userId": this.userId
					},
					header: {
						'content-type': 'application/json'
					},
					success: (res) => {
						let arr = res.data.data.objects;
						let money = 0;
						for (let i = 0; i < arr.length; i++) {
							money += arr[i].amount;
						}
						this.monthIncome = money;
					}
				});
			},
			// 加载查询的账单列表
			showBillList() {
				uni.request({
					url: 'http://120.46.197.40:8080/api/userAccount/getBillsRecord',
					method: 'POST',
					data: {
						"monthTime": this.selectMonth,
						"pageNo": 1,
						"pageRow": 50,
						"type": this.index,
						"userId": this.userId
					},
					header: {
						'content-type': 'application/json'
					},
					success: (res) => {
						let arr = res.data.data.objects;
						for (let i = 0; i < arr.length; i++) {
							arr[i].imgUrl = "/static/wallet/" + this.iconArray[arr[i].type - 1];
							arr[i].time=arr[i].createTime.substring(5,9)+" "+arr[i].createTime.substring(11,15);
						}
						this.billList=arr;
					}
				});
			}
		}
	}
</script>


<style>

</style>
